<template>
    <div class="message">
        <div class="topBox">
            <img class="leftImg" src="../../static/imgs/left_b.png" @click="handleBack" alt="">
            <div class="title">
                {{ $t('assemble.消息通知') }}
            </div>
        </div>


        <div class="messageList" v-for="(item, index) in 3">
            <div class="messageItem">
                <div class="value">
                    系统有更新请退出后重新登入
                </div>
                <div class="value">
                    System has been updated, please log out and log back in.
                </div>
                <div class="time">
                    2024/1/26 10:22:47
                </div>
            </div>

        </div>



    </div>
</template>
<script>

export default {
    components: {

    },
    data() {
        return {
            content: "",
            lang: 'zh',

        }
    },
    created() {
        this.$i18n.locale = localStorage.getItem('langtype')
        this.lang = localStorage.getItem('langtype')

    },
    mounted() {
    },
    methods: {
        handleBack() {
            this.$router.back(1)
        },

    },

}
</script>

<style scoped lang="scss">
.message {
    width: 100%;
    height: 100vh;
    background-color: #F8F8F8;
}

@media screen and (max-width: 750px) {
    .topBox {
        width: 100%;
        height: 44px;
        // padding: 10px 15px;
        padding-top: 10px;
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        background-color: #ffffff;

        .leftImg {
            width: 24px;
            height: 24px;
            position: absolute;
            top: 10px;
            left: 15px;
        }

        .title {
            width: 100%;
            text-align: center;

        }
    }

    .messageList {
        margin-top: 10px;
        .messageItem {
            width: 375px;
            // height: 123px;
            background-color: #ffffff;
            margin: 0 auto;
            margin-bottom: 10px;
            border-radius: 10px;
            padding: 15px;
            box-sizing: border-box;


            .value {}

            .time {}
        }

    }

}

@media screen and (min-width: 751px) and (max-width: 1300px) {
    .topBox {
        width: 100%;
        height: 88px;
        // padding: 10px 15px;
        padding-top: 20px;
        position: relative;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 25px;
        color: #333333;
        line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: flex;
        align-items: center;
        background-color: #ffffff;

        .leftImg {
            width: 48px;
            height: 48px;
            position: absolute;
            top: 40px;
            left: 30px;
        }

        .title {
            width: 100%;
            text-align: center;

        }
    }


    .messageList {
        margin-top: 10px;
        .messageItem {
            width: 95%;
            // height: 200px;
            background-color: #ffffff;
            margin: 0 auto;
            margin-bottom: 30px;
            border-radius: 20px;
            padding: 30px;
            box-sizing: border-box;
            font-size: 24px;


            .value {}

            .time {}
        }

    }

}
</style>